<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div>
            <el-row :gutter="4">
              <el-form
                :inline="true"
                label-position="left"
                class="demo-form-inline"
                label-width="100px"
              >
                <el-form-item>
                  <el-input
                    class="mr5 sh"
                    v-model="searchDto.keywords"
                    placeholder="请输入关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                    >查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clear"
                  >
                    重置
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-circle-plus"
                    type="primary"
                    @click="newTool"
                  >
                    新增工具
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                v-for="(item, index) in categoryTypes"
                :key="index"
                :label="item.label"
                :name="item.keyword"
              ></el-tab-pane>
            </el-tabs>
            <page-table
              :page-data="CommonToolPageList"
              :loading="loading"
              :do-get-page-data="getCommonToolPageList"
            >
              <el-table-column
                label="序号"
                type="index"
                width="100"
                align="center"
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="名称"
                align="center"
                prop="name"
              >
              </el-table-column>
              <el-table-column label="图标" align="center" prop="icon">
                <template slot-scope="scope">
                  <i :class="scope.row.icon"></i>
                </template>
              </el-table-column>
              <el-table-column label="颜色" align="center" prop="bgColor">
                <template slot-scope="scope">
                  <div
                    style="width:20px;height:20px;margin:0 auto;"
                    :style="{ backgroundColor: scope.row.bgColor }"
                  ></div>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="跳转路径"
                align="center"
                prop="route"
                width="200"
              >
              </el-table-column>
              <el-table-column label="所在位置" align="center" prop="position">
                <template slot-scope="scope"
                  >{{ scope.row.position | keyText("COMMON_TOOL_POSITION") }}
                </template>
              </el-table-column>
              <el-table-column label="打开方式" align="center" prop="openType">
                <template slot-scope="scope"
                  >{{ scope.row.openType | keyText("COMMON_OPEN_TYPE") }}
                </template>
              </el-table-column>
              <el-table-column label="图标大小" prop="iconSize" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.iconSize + "px" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="工具大小" prop="outSize" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.outSize + "px" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" prop="status" align="center">
                <template slot-scope="scope">
                  <sz-badge
                    :value="scope.row.status ? '启用' : '禁用'"
                    :type="scope.row.status ? 'success' : 'danger'"
                  ></sz-badge>
                </template>
              </el-table-column>
              <!--              <el-table-column-->
              <!--                align="center"-->
              <!--                label="排序"-->
              <!--                prop="sort"-->
              <!--              ></el-table-column>-->
              <el-table-column
                width="200"
                label="管理"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="预览" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-view"
                      @click="seeTool(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="editTool(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="deleteTool(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
          </div>
        </el-col>
      </el-card>
    </el-row>
    <el-dialog
      title="新增/编辑常用工具:"
      @close="fail"
      :visible.sync="toolStatus"
      width="800px"
    >
      <el-row style="padding-right: 10px">
        <el-col :span="24" class="mt20">
          <el-form
            ref="form"
            :rules="rules"
            :model="formInfo"
            label-width="115px"
          >
            <el-form-item label="工具名称:" prop="name">
              <el-input
                placeholder="请输入工具名称"
                v-model="formInfo.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="图标:" prop="icon">
              <el-input
                placeholder="请输入图标,请参考el-icon-brush"
                v-model="formInfo.icon"
              ></el-input>
            </el-form-item>
            <el-form-item label="所在位置:" prop="position">
              <el-select
                v-model="formInfo.position"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in categoryTypes"
                  :key="item.keyword"
                  :label="item.label"
                  :value="item.keyword"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="打开方式:" prop="openType">
              <el-select
                v-model="formInfo.openType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in openTypes"
                  :key="item.keyword"
                  :label="item.label"
                  :value="item.keyword"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工具大小(px):" prop="outSize">
              <el-input
                placeholder="请输入工具大小"
                v-model="formInfo.outSize"
              ></el-input>
            </el-form-item>
            <el-form-item label="图标大小(px):" prop="iconSize">
              <el-input
                placeholder="请输入图标大小"
                v-model="formInfo.iconSize"
              ></el-input>
            </el-form-item>
            <el-form-item label="跳转路径:" prop="route">
              <el-input
                placeholder="请输入跳转路径,请参考{'name':'Home'}"
                v-model="formInfo.route"
              ></el-input>
            </el-form-item>
            <el-form-item label="颜色:" prop="bgColor">
              <el-color-picker v-model="formInfo.bgColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
              <el-input-number
                size="large"
                v-model="formInfo.sort"
                :min="0"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              <el-switch
                v-model="formInfo.status"
                active-color="#13ce66"
                :active-value="true"
                :inactive-value="false"
                active-text="启用"
                inactive-text="禁用"
                inactive-color="#eeeeee"
              >
              </el-switch>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="save" type="primary">确定</el-button>
        <el-button @click="fail">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog width="400px" :visible.sync="seeToolStatus">
      <el-row>
        <el-col style="display: flex;justify-content: center" :span="24">
          <div>
            <el-button
              circle
              :style="{
                backgroundColor: seeTools.bgColor,
                color: 'white',
                width: seeTools.outSize + 'px',
                height: seeTools.outSize + 'px',
                fontSize: seeTools.iconSize + 'px'
              }"
              :icon="seeTools.icon"
            ></el-button>
            <p style="text-align: center">{{ seeTools.name }}</p>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </section>
</template>
<script>
export default {
  created() {
    this.getCommonToolPageList();
  },
  data() {
    return {
      activeName: "HOME",
      categoryTypes: this.getDictionary("COMMON_TOOL_POSITION"), //数据字典所在位置分类
      openTypes: this.getDictionary("COMMON_OPEN_TYPE"), //数据字典打开方式分类
      loading: false,
      searchDto: {
        pageIndex: "",
        pageSize: 10,
        position: "HOME",
        keywords: ""
      },
      CommonToolPageList: { records: [] },
      toolStatus: false,
      seeToolStatus: false,
      seeTools: {},
      formInfo: {
        id: "",
        name: "",
        icon: "",
        iconSize: "",
        outSize: "",
        route: "",
        sort: "",
        bgColor: "#409eff", //默认颜色
        position: "",
        openType: "",
        status: false
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        icon: [{ required: true, message: "请输入图标", trigger: "blur" }],
        position: [
          { required: true, message: "请输入所在位置", trigger: "blur" }
        ],
        openType: [
          { required: true, message: "请输入打开方式", trigger: "blur" }
        ],
        outSize: [
          { required: true, message: "请输入工具大小", trigger: "blur" }
        ],
        iconSize: [
          { required: true, message: "请输入图标大小", trigger: "blur" }
        ],
        route: [{ required: true, message: "请输入跳转路径", trigger: "blur" }],
        bgColor: [{ required: true, message: "请输入颜色", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }]
      }
    };
  },
  methods: {
    //获取分页数据
    getCommonToolPageList(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getCommonToolPageList(tem).then(ret => {
        this.CommonToolPageList = ret.data;
      });
    },
    //点击事件
    handleClick(tab, event) {
      let position;
      switch (tab.paneName) {
        case "-1":
          position = "";
          break;
        default:
          position = tab.paneName;
          break;
      }
      this.searchDto = {
        pageIndex: "",
        pageSize: 10,
        keywords: ""
      };
      this.searchDto.position = position;
      this.getCommonToolPageList();
    },
    //新建
    newTool() {
      this.toolStatus = true;
    },
    //预览
    seeTool(row) {
      this.seeToolStatus = true;
      this.seeTools = row;
    },
    //关闭弹窗事件
    fail() {
      this.toolStatus = false;
      this.formInfo = {
        id: "",
        name: "",
        icon: "",
        iconSize: "",
        outSize: "",
        route: "",
        sort: "",
        bgColor: "#409eff",
        position: "",
        openType: "",
        status: false
      };
    },
    //编辑/新增确定
    save() {
      let tem = { body: this.formInfo };
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.API.addOrUpdateCommonTool(tem).then(() => {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.toolStatus = false;
            this.getCommonToolPageList();
          });
        } else {
          return false;
        }
      });
    },
    //编辑弹窗
    editTool(row) {
      this.toolStatus = true;
      this.API.getCommonToolById({ id: row.id }).then(ret => {
        this.formInfo = ret.data;
      });
    },
    //删除
    deleteTool(row) {
      this.$confirm("确认删除当前工具?", "提示", {}).then(() => {
        this.API.deleteCommonToolById({ id: row.id }).then(() => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getCommonToolPageList(1);
        });
      });
    },
    //查询
    search() {
      this.getCommonToolPageList(1);
    },
    //重置
    clear() {
      this.searchDto = {
        pageIndex: "",
        pageSize: 10,
        position: "HOME",
        keywords: ""
      };
      this.activeName = "HOME";
      this.getCommonToolPageList(1);
    }
  }
};
</script>
<style scoped lang="less"></style>
